<template>
  <div class="address-table">
    <div class="title-row">
      <Title title="地址管理" />
      <PlainCreateBtn v-if="!isModify" class="create-btn" @click="addAddress">添加地址</PlainCreateBtn>
    </div>
    <u-table
      ref="customerTableRef"
      :data="list"
      :border="true"
      :row-height="49"
      use-virtual
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
    >
      <EmptyPlaceholder slot="empty" />
      <u-table-column align="left" label="序号" type="index" width="60" fixed />
      <u-table-column align="left" label="联系人" min-width="110">
        <template slot-scope="scope">
          <ToolTip v-if="isShowAddress" :content="scope.row.contacts" />
          <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="联系电话" min-width="110">
        <template slot-scope="scope">
          <ToolTip v-if="isShowAddress" :content="scope.row.phoneNo" />
          <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="省市" min-width="110">
        <template slot-scope="scope">
          <ToolTip v-if="isShowAddress" :content="formatAddress(scope.row.province)" />
          <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="详细地址" min-width="110">
        <template slot-scope="scope">
          <ToolTip v-if="isShowAddress" :content="scope.row.address" />
          <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="备注" min-width="110">
        <template slot-scope="scope">
          <ToolTip v-if="isShowAddress" :content="scope.row.remark" />
          <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
        </template>
      </u-table-column>
      <u-table-column v-if="!isModify" align="left" label="操作" width="110" fixed="right">
        <template slot-scope="scope">
          <div class="operate-row">
            <div class="operate-btn edit" @click="handleEdit(scope.row)">编辑</div>
            <div class="operate-btn del" @click="handleDelete(scope.row.uuid)">删除</div>
          </div>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import sensitiveInfo from '@/components/SupplierComponent/sensitiveInfo';
import emptyIcon from '@/assets/home/emptyIcon.png';
import { delAddress } from '@/api/supplier';

export default {
  components: {
    Title,
    sensitiveInfo,
    EmptyPlaceholder
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isShowAddress: {
      type: Boolean,
      default: false
    },
    supplierId: {
      type: Number,
      default: null
    },
    parentSupplierId: {
      type: Number,
      default: null
    },
    isModify: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emptyIcon
    };
  },
  computed: {
    paramsObj() {
      const { type } = this.$route.query;
      return {
        type: 0,
        fieldType: 2,
        channelId: type ? this.parentSupplierId : this.supplierId
      };
    }
  },
  methods: {
    addAddress() {
      this.$emit('add');
    },
    formatAddress(text) {
      if (text && text.includes(',')) {
        return text.replace(/,/g, '');
      } else {
        return text || '--';
      }
    },
    handleEdit(row) {
      this.$emit('edit', row);
    },
    handleDelete(uuid) {
      this.$confirm('是否确定删除', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        delAddress(this.supplierId, { uuid }).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.$emit('updateData');
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    setSensitive() {
      if (!this.isShowAddress) {
        this.$emit('setSensitive', 'isShowAddress');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.address-table {
  margin: 22px 24px 32px 16px;
  .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  ::v-deep .empty-class {
    padding: 0;
  }
  .operate-row {
    display: flex;
    align-items: center;
    .operate-btn {
      cursor: pointer;
      color: #406eff;
      &.edit {
        margin-right: 16px;
        position: relative;
        &::after {
          content: '|';
          position: absolute;
          right: -8px;
          width: 1px;
          height: 24px;
          color: #999;
        }
      }
    }
  }
}
</style>
